<template>
  <div>
    <nav-bar>
      <template v-slot:default>商品详情:{{id}}</template>
    </nav-bar>
    <van-image
        style="padding-top: 50px;"
        width="100%"
        lazy-load
        :src="detail.cover_url"
    />
    <van-card
        style="text-align: left"
        :num="detail.stock"
        :price="detail.price +'.00'"
        :desc="detail.description"
        :title="detail.title"
    >
      <template #tags>
        <van-tag plain type="danger">{{detail.is_recommend == 1 ?'推荐':'新书'}}</van-tag>
      </template>
      <template #footer>
        <van-button type="warning" @click="handleAddCart">加入购物车</van-button>
        <van-button type="danger" @click="goToCart">立即购买</van-button>
      </template>
    </van-card>
    <van-tabs v-model="active">
      <van-tab title="详情">
        <div class="content" v-html="detail.details">

        </div>
      </van-tab>
      <van-tab title="热评">
        <div v-if="detail.comments.length <= 0">
          暂无评论内容
        </div>
        <div v-else v-for="item in detail.comments">
          这里是评价内容： {{item.content}}
        </div>
      </van-tab>
      <van-tab title="相关图书">
        <goods-list :goods="like_goods"></goods-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";
  import GoodsList from "components/content/goods/GoodsList";
  import {useRoute,useRouter} from 'vue-router';
  import {ref, onMounted, reactive, toRefs} from "vue";
  import {getDetail} from "network/detail";
  import {addCart} from "network/cart";
  import {Toast} from "vant";
  import {useStore} from 'vuex';

  export default {
    name: "Detail",
    components:{
      NavBar,
      GoodsList
    },
    setup(){
      let active = ref(1);
      const route = useRoute();
      const router = useRouter();
      const store = useStore();
      let id = ref(0);
      //数据模型
      let book = reactive({
        detail:{},
        like_goods:[]
      })
      onMounted(()=>{
        id.value = route.query.id;
        getDetail(id.value).then(res=>{
          book.detail = res.goods;
          // console.log(book.detail.comments);
          book.like_goods = res.like_goods;
        })
      })
      //添加购物车
      const handleAddCart = () => {
        // console.log(111);
        addCart({goods_id:book.detail.id,num:1}).then(res=>{
          if (res.status == '201' || res.status == '204'){
            Toast.success('添加成功！');
            // 设置store中 cartCount
            store.dispatch('updateCart');
          }
        })
      }
      //立即购买
      const goToCart = () => {
        // console.log(222);
        addCart({goods_id:book.detail.id,num:1}).then(res=>{
          if (res.status == '201' || res.status == '204'){
            Toast.success('添加成功,显示购物车！');
            // 设置store中 cartCount
            store.dispatch('updateCart');
            router.push({path:'/shopcart'});
          }
        })
      }
      return{
        id,
        ...toRefs(book),
        active,
        handleAddCart,
        goToCart
      }
    }
  }
</script>

<style scoped lang="scss">
.van-tabs{
    min-height: 200px;
    padding-bottom: 60px;
  .content{
      padding: 10px;

  }
}

</style>